import React, {useEffect, useState} from 'react'
import './index.scss'
import {Avatar, Image, Menu} from "antd";
import Axios from "../../../utils/Axios";

export default function Center() {

  return(
    <div className="center">
      <div className="user-info">
        <UserPanel />
      </div>

      <div className="center-content-box">
        <div className="center-content-header">
          <Menu theme="light" mode="horizontal" selectable={false} defaultSelectedKeys={['1']}>
            <Menu.Item key={1}>{'消息'}</Menu.Item>
          </Menu>
          <div className="center-content">

          </div>
        </div>
      </div>
    </div>
  )
}

function UserPanel() {
  const src = ''
  const [userInfo, setUserInfo] = useState({})
  useEffect(()=>{
    async function getUserInfo() {
      Axios.get(`/user/user`)
        .then(res => {
          setUserInfo(res.data.data)
        })
    }
    getUserInfo()
  })
  return(
    <div className="user-panel">
      <div className="user-panel-info">
        {
          src ?
            <Avatar src={<Image src={src}/>} />
            : <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
        }
        <p className="user-panel-username">{userInfo.nickname}</p>
        <p className="user-panel-desc">{userInfo.introduction}</p>
      </div>
      <div className="user-panel-tips">
        <h3>标签</h3>
        <div>

        </div>
      </div>
    </div>
  )
}